<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Eloan-P2P平台(系统管理平台)</title>
    <link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css"/>
    <link rel="stylesheet" href="/css/core.css" type="text/css"/>
    <script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/messages_cn.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <style type="text/css">
        body {
            background-color: #eee;
        }

        .cm-container {
            margin-top: 160px;
        }

        .login {
            width: 360px;
            height: 300px;
            margin: 0px auto;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("#loginForm").validate({
                //错误提示的样式,使用bootstrap情景样式替换默认的error样式,即由黑变红
                errorClass: "text-danger",
                //highlight:表单中某个元素验证不通过就触发该函数
                highlight: function (element, errorClass) {
                    $(element).fadeOut(function () {
                        $(element).fadeIn();
                    });
                    $(element).closest('div .form-group').addClass('has-error').removeClass('has-success');
                },
                //unhighlight:表单中某个元素验证通过的时候调用该回调函数
                unhighlight: function (element, errorClass) {
                    $(element).closest('div .form-group').removeClass('has-error').addClass('has-success');
                },
                //submitHandler 表单验证通过之后触发该函数,并且会阻止表单的默认提交
                submitHandler: function (form) {
                    $(form).ajaxSubmit(function (data) {

                        if (data.success) {
                            $.messager.confirm('提示', '登录成功', function () {
                                //跳转到personal控制器
                                window.location.href = '/main';
                            });
                        } else {
                            $.messager.alert('提示', data.message);
                        }
                    });
                },
                rules: {
                    username: {
                        required: true,
                    },
                    password: {
                        required: true,
                        rangelength: [6, 16]
                    }

                },
                messages: {
                    username: {
                        required: "请输入手机号,不能为空",
                    },
                    password: {
                        required: "请输入密码,不能为空",
                        rangelength: "密码长度为{0}-{1}个字母,数字,下划线组成"
                    }
                }
            });
        });
    </script>

</head>
<body>
<div class="container cm-container">
    <h3 class="text-center">蓝源Eloan-P2P平台(系统管理平台)</h3>
    <hr/>
    <div class="login">
        <form id="loginForm" action="/login" method="post">
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon">用户名</div>
                    <input class="form-control" name="username" value="admin"/>
                </div>
            </div>
            <div class="form-group form-group-lg">
                <div class="input-group">
                    <div class="input-group-addon">密&emsp;码</div>
                    <input class="form-control" name="password" type="password" value="000000"/>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-lg btn-primary btn-block">登录</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>